<template>
  <div class="box">

    <div class="word" >
      <span class="year">二0二一学年第二学期</span>
    </div>
    
    <div class="photo-content">
      <img src="../../../assets/images/growReport.jpg" class="photo-img">
      <div class="state">
        <span class="state1" @click='state' :v-model="word">
          制作中
        </span>
      </div>
      <div class="Info">
        <span class="Info-name">张昊</span><br/>
        <span class="Info-name">一年级二班</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>

/*包括学期和成长报告的盒子*/
.box{
  display: flex;
  width: 29%;
}

/*文字背景框*/
.word{
  display: flex;
  margin: 0 .625rem;
  background: #f5f5f5;
}

/*文字*/
.year{
  display: flex;
  width:1rem;
  line-height: 1.875rem;
  margin-left: .0625rem;
  text-align: center;
  margin: .125rem .5rem;
  font-size:1rem;
  color:#7C0000;
}

/*照片框*/
.photo-content{
  margin-left:1.0625rem;
  position: relative;
  border:.0625rem dashed #7C0000;
}

/*成长报告封面照片*/
.photo-img{
  height:18.75rem;
  width:13.4375rem;
}

/*完成状态*/
.state{
  background:#f2e5e5;
  border-radius: .25rem;
  width:3.625rem;
  height:1.5625rem;
  text-align: center;
  position:absolute;
  z-index:2;
  top:8.9375rem;right:.875rem;
}

/*文字制作中*/
.state1{
  font-size:.875rem;
  line-height: 1.5625rem;
  right: 1.25rem;
}


/*学生信息*/
.Info{
  position: absolute;
  bottom: 1.25rem;
  right: 1.25rem;
  width: 2.5rem;
  height: 3.75rem;
  flex-wrap: wrap;
}

.Info-name{
  font-size: .0625rem;
}
</style>